<template>
  <view class="flex justify-center items-center mx-8 p-1 border border-gray-300">
    <view class="bg-red-500 text-white text-lg rounded h-10 w-16 active:bg-red-600" @click="handleMinus">-</view>
    <input type="number" class="text-center text-lg" :value="curValue" @input="handleInput" @blur="handleBlur">
    <view class="bg-blue-500 text-white rounded text-lg h-10 w-16 active:bg-blue-600" @click="handlePlus">+</view>
  </view>
</template>

<script setup lang="ts">

import {computed} from "vue";

const props = defineProps({
  value: {
    type: Number,
    default: 0
  },
})
const emit = defineEmits(['update:value', 'change']);

const curValue = computed({
  get() {
    return props.value
  },
  set(value: any) {
    emit('update:value', value)
  }
})
const handleInput = (e: any) => {
  let num = Number(e.detail.value)
  if (num >= 1000) {
    curValue.value = 1000
  } else if (num <= 0) {
    curValue.value = 0
  } else {
    curValue.value = num
  }
  emit('change')
}
const handleBlur = (e: any) => {
  let num = Number(e.detail.value)
  if (num >= 1000) {
    num = 1000
  } else if (num <= 0) {
    num = 0
  }


}

const handleMinus = () => {
  if (curValue.value <= 0) return
  curValue.value--
  emit('change')
}
const handlePlus = () => {
  if (curValue.value > 1000) return
  curValue.value++
  emit('change')
}
</script>

<style scoped>

</style>